<template>
	<view class="container">
		<!-- 收益提示 -->
		<view class="income-tip">
			<text>收益会在订单确认收货后立即到账提现账户</text>
		</view>
		<!-- 收益卡片 -->
		<view class="income-card">
			<image class="card-bg" src="@/static/banner.png" mode="widthFix"></image>
			<view class="income-card-wrap">
				<view class="income-item">
					<view class="income-left">
						<view class="income-label">可提现余额(元)</view>
						<view class="income-value">{{ userInfo.totalAmout | formatMoney }}</view>
					</view>
					<view class="withdraw-btn">
						<button class="btn-withdraw" @click="goToWithdraw">账户提现</button>
					</view>
				</view>
				<view class="income-details">
					<view class="detail-item">
						<view class="detail-label">待确认收货(元)</view>
						<view class="detail-value">{{ userInfo.recAmount | formatMoney }}</view>
					</view>
					<view class="detail-item">
						<view class="detail-label">待领取补贴(元)</view>
						<view class="detail-value">{{ userInfo.claimAmount | formatMoney }}</view>
					</view>
					<image class="coin-image" src="/static/coin.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-area">
			<view class="record-list">
				<!-- 收入记录示例 -->
				<view class="record-item"
					:class="item.type == 1 ? 'income' : 'expense'"
					v-for="(item, index) in list" :key="index">
					<view class="record-left">
						<view class="record-title">{{ item.note }}</view>
						<view class="record-time">{{ item.createTime }}</view>
					</view>
					<view class="record-right">
						<view class="record-amount" :class="item.type == 1 ? 'income' : 'expense'">{{ item.type == 1 ? '+' : '-' }}{{ item.amount | formatMoney }}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="'loading'" fontSize="24" iconSize="30" v-if="listLoading"/>
			<u-empty v-if="!listLoading && total <= 0" mode="data" text="收益记录为空" textSize="24" iconSize="120"></u-empty>
		</view>
	</view>
</template>

<script>
	import listMixin from '@/common/list.js'
	export default {
		mixins: [listMixin],
		data() {
			return {
				disableList: true,
				title: '我的收益',
				activeFilter: '全部',
				query: {},
				queryUrl: "/order/accountRecord"
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters["common/getUserInfo"]
			}
		},
		filters: {
			formatMoney(val) {
				return val ? Number(val).toFixed(2) : '0.00'
			}
		},
		onShow() {
			this.getList(true)
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.request("get", "/order/accountInfo").then(res => {
					this.$store.commit("common/setUserInfo", res.data || {})
				})
			},
			// 切换筛选条件
			switchFilter(filter) {
				this.query.filter = filter;
				this.getList(true)
			},
			// 跳转到提现页面
			goToWithdraw() {
				uni.navigateTo({
					url: '/pages/account/withdraw'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: calc(100vh - var(--window-bottom));
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	
	
	/* 收益提示样式 */
	.income-tip {
		background-color: #FFF9E6;
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		color: #FF9500;
	}
	
	/* 收益卡片样式 */
	.income-card {
		margin: 30rpx;
		position: relative;
		overflow: hidden;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		.card-bg {
			width: 100%;
			height: 346rpx;
			border-radius: 16rpx;
		}
		.income-card-wrap{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			padding: 20rpx 25rpx;
			box-sizing: border-box;
			
			.income-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 140rpx;
				padding: 16rpx;
				margin-bottom: 30rpx;
				width: 100%;
			}
			
			.income-left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			
			.income-label {
				font-size: 24rpx;
				margin-bottom: 8rpx;
				color: rgba(255, 255, 255, 0.9);
			}
			
			.income-value {
				font-size: 46rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}
			
			.btn-withdraw {
				background-color: #FFE600;
				color: #333333;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 40rpx;
				padding: 8rpx 30rpx;
				border: none;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
			}
			
			.income-details {
				display: flex;
				justify-content: flex-start;
				position: relative;
				margin-top: 5rpx;
				padding-left: 10rpx;
			}
		}
	}
	
	.detail-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 15rpx;
		margin-right: 40rpx;
	}
	
	.detail-label {
		font-size: 22rpx;
		margin-bottom: 8rpx;
		color: rgba(255, 255, 255, 0.85);
	}
	
	.detail-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
	}
	
	.coin-image {
		position: absolute;
		right: 10rpx;
		bottom: -10rpx;
		width: 110rpx;
		height: 110rpx;
		opacity: 0.9;
		filter: drop-shadow(0 2rpx 5rpx rgba(0, 0, 0, 0.15));
	}
	
	.empty-content {
		color: #999;
		font-size: 28rpx;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.filter {
		display: flex;
		gap: 30rpx;
	}
	
	.filter-text {
		font-size: 28rpx;
		color: #666;
		padding: 6rpx 10rpx;
	}
	
	.filter-text.active {
		color: #FF6B00;
		font-weight: bold;
		position: relative;
	}
	
	.filter-text.active::after {
		content: '';
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #FF6B00;
		border-radius: 2rpx;
	}
	
	.record-list {
		width: 100%;
		background-color: #fff;
	}
	
	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.record-left {
		display: flex;
		flex-direction: column;
	}
	
	.record-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.record-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.record-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.record-amount.income {
		color: #FF6B00;
	}
	
	.record-amount.expense {
		color: #333;
	}
	
	.record-amount.pending {
		color: #FF9500;
	}
</style>
